<template>
  <div class="systemConfig">
    <el-form
      ref="baseFormRef"
      :model="baseForm"
      :rules="rules"
      label-width="140px"
    >
      <el-tabs
        tab-position="left"
        style="height: 100%"
        v-model="thirdTab"
        class="thirdTab"
      >
        <el-tab-pane label="企微多例" :key="'QyhMutilSetting'">
          <QyhMutilSetting
            :tabsData="dataForm.weCom"
            @refresh="refresh"
          ></QyhMutilSetting>
        </el-tab-pane>
        <el-tab-pane label="阿里钉钉" :key="'DDMutilSetting'">
          <DingMutilSetting
            :tabsData="dataForm.dingCom"
            @refresh="refresh"
          ></DingMutilSetting>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import DingMutilSetting from "@/views/system/sysConfig/external-user/dingMutilSetting.vue";
import QyhMutilSetting from "@/views/system/sysConfig/external-user/qyhMutilSetting.vue";
export default {
  name: "SysConfigExternalUser",
  components: { DingMutilSetting, QyhMutilSetting },
  props: {
    dataForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      btnLoading: false,
      testLoading: false,
      thirdTab: "0",
      baseForm: this.dataForm,
      rules: {},
    };
  },
  watch: {
    dataForm() {
      this.baseForm = this.dataForm ? this.dataForm : this.baseForm;
      console.log("EXTERNAL index this.baseForm", this.baseForm);
    },
    thirdTab(val) {
      if (val == 0 || val == 1) {
        const type = val == 0 ? 1 : 2;
        // this.getSynThirdTotal(type);
      }
    },
  },
  computed: {},
  methods: {
    /**刷新 */
    refresh() {
      this.$emit("refreshInit");
    },
  },
};
</script>

<style lang="scss" scoped>
.systemConfig {
  padding: 0;

  >>> .el-card__header {
    padding: 6px 20px;
  }

  >>> .el-tabs--border-card {
    box-shadow: none;
    height: calc(100vh - 120px);
  }

  >>> .el-tabs--border-card > .el-tabs__content {
    padding: 30px 36px 10px 36px;
  }

  .thirdTab >>> .el-tabs__content {
    height: 100%;

    .el-tab-pane {
      height: auto;
    }
  }

  .saveBtn {
    width: 100px;
  }
}
</style>
